<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../common/tag.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>${article.articleTitle}-阅学网</title>
<meta name="Keywords" content="Web编程、计算机">
<meta name="description" content="Web编程、计算机">
<%@ include file="../common/common.jsp"%>
<script src="js/public/article/article.js"></script>
</head>
<body>
	<jsp:include page="/public/top.jsp"></jsp:include>
	<div class="step-detail" >
		<span><a href="public/index">首页</a>>></span>
	</div>
	<div class="yc_content_inner">
		<input type="hidden" value="${article.id}" id="articleId">
		<input type="hidden" value="${user.chName}" id="currentChName">
		<div  class="article-detail-left">
			<div class="showCon">
				<h1>${article.articleTitle}</h1>
				<h3>
					时间：<fmt:formatDate value="${article.createDate}" pattern="yyyy-MM-dd HH:mm:ss" />
					&nbsp;&nbsp;来源：${article.chName} &nbsp;&nbsp;
					<font color="#ff0000">字体显示：</font>
					<a onclick="javascript:doZoom(18)"	style="cursor: hand">大</a> 
					<a onclick="javascript:doZoom(16)"	style="cursor: hand">中</a> 
					<a onclick="javascript:doZoom(12)"	style="cursor: hand">小 </a>
					&nbsp;&nbsp;&nbsp;浏览：${article.clickRate}次
				</h3>
				<div>
					<p class="p0" style="color: #333333; font-family: 'Microsoft Yahei'; font-size: 14px; background-color: #FFFFFF; text-indent: 32pt;">
						<span id="zoom" style="font-family: SimSun; font-size: 14px;">${article.articleContent}</span>
					</p>
				</div>
				<div class="articleDetail">
					<a class="common-btn zhichi" href="javascript:void(0);"
						onclick="operateClick(1);">支持<span>(${article.supportNum})</span></a>
					<a class="common-btn fandui" href="javascript:void(0);"
						onclick="operateClick(2);">吐槽<span>(${article.opposeNum})</span></a>
					<a class="common-btn collect" href="javascript:void(0);"
						onclick="operateClick(3);">收藏<span>(${article.collectNum})</span></a>
				</div>
				
				<div class="article-detail-next-pre">
					<c:if test="${ perArticle != null }">
						<div class="article-detail-pre">
							上一篇:&nbsp;&nbsp;<a href="public/article/detail/${perArticle.id }" title="${perArticle.articleTitle }">${perArticle.articleTitle }</a>
						</div>
					</c:if>
					<c:if test="${nextArticle != null}">
						<div class="article-detail-next">
							下一篇:&nbsp;&nbsp;<a  href="public/article/detail/${nextArticle.id }"  title="${nextArticle.articleTitle }">${nextArticle.articleTitle }</a>
						</div>
					</c:if>
				</div>
				
				<div class="article-detail-comment" style="width: 700px;">
					<div class="comment-plug">
							<div class="comment-content" style="width: 700px;" contenteditable="true" id="world" placeholder="说点什么吧..." ></div>
							<div class="biaoqing-fabu">
							<div class="biaoqing">
								<a href="javascript:void(0);">插入表情</a>
							</div>
							<div>
								<a href="javascript:void(0);" class="common-btn fabu" onclick="operateComment();">评&nbsp;&nbsp;论</a>
							</div>
						</div>
					</div>
				</div>
				<div class="new-pinglun-title">
					最新评论
				</div>
				<div class="pinglun-list">
						<ul>
							<c:forEach items="${comments }" var="comment">
								<li>
									<div style="float: left; width: 60px; height: 70px;">
										<img style="border-radius: 50%; width: 45px; height: 45px;"
											src="public/user/showPicture/${comment.creater }" />
									</div>
									<div style="width: 650px; float: left;">
										<div class="pinglun-date">${comment.chName}:&nbsp;&nbsp;<fmt:formatDate
												value="${comment.commentDate}" pattern="yyyy-MM-dd HH:mm:ss" />
										</div>
										<p class="pinglun-comment">${comment.commentContent }</p>
									</div>
								</li>
							</c:forEach>
						</ul>
				</div>
			</div>
			<div class="page">
				<span>
					<a href="public/article/detail/${article.id}&pageNow=1">首页</a>
				</span>
				<c:choose>
					<c:when test="${page.pageNow -1 >0}">
						<span>
							<a href="public/article/detail/${article.id}&pageNow=${page.pageNow-1}">上一页</a>
						</span>
					</c:when>
				</c:choose>
				<c:forEach begin="1" end="${page.totalPageCount}" var="pageIndex">
					<c:choose>
						<c:when test="${page.pageNow==pageIndex}">
							<span>
								<a href="javascript:void(0);"	style="float: left; background: #EAEAEA;">${pageIndex }</a>
							</span>
						</c:when>
						<c:otherwise>
							<span>
								<a href="public/article/detail/${article.id}&pageNow=${pageIndex}" target="_self">${pageIndex }</a>
							</span>
						</c:otherwise>
					</c:choose>
				</c:forEach>
				<c:choose>
					<c:when test="${page.pageNow <page.totalPageCount}">
						<span>
							<a href="public/article/detail/${article.id}&pageNow=${page.pageNow+1 }"	target="_self">下一页</a>
						</span>
					</c:when>
				</c:choose>
				<span>
				<a href="public/article/detail/${article.id}&pageNow=${page.totalPageCount}">末页</a></span>
			</div>
		</div>
		<div class="article-detail-right">
			<%-- 你可能还感兴趣的--%>
			<div class="possibly-interested-div" >
				<div class="possibly-interested-title">
					<span>你可能还感兴趣的</span>
				</div>
				<div class="possibly-interested-content" >
					<ul>
						<c:forEach items="${articles }" var="atricle">
							<li>
								<a href="public/article/detail/${atricle.id }">
									<c:choose>
											<c:when test="${fn:length(article.articleTitle) > 26}">${fn:substring(article.articleTitle, 0, 26)}...</c:when>
											<c:otherwise> ${article.articleTitle }</c:otherwise>
									</c:choose>
								</a>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			
			<%-- 文章来源--%>
			<div class="article-sourcse-info">
				<div class="article-sourcse-info-title">
					<span>文章来源</span>
				</div>
				<div class="article-sourcse-info-content">
					<ul>
						<li class="article-sourcse-info-pic">
							<img alt="" src="public/user/showPicture/${u.id }">
						</li>
						<li class="article-sourcse-info-auther">
							<span class="article-sourcse-info-auther-name">${u.chName }</span>
							<span class="article-sourcse-info-auther-grade" style="
											<c:if test="${u.grade <5}">color:#999999</c:if>
					               		 	<c:if test="${u.grade >=5 && u.grade <10}">color:#468847</c:if>
					               		 	<c:if test="${u.grade >=10 && u.grade <15}">color:#F89406</c:if>
					               		 	<c:if test="${u.grade >=15 && u.grade <25}">color:#FF0000</c:if>
					               		 	<c:if test="${u.grade >=25}">color:#189AE5</c:if>
										">LV${u.grade }</span>
						</li>
						<li class="article-sourcse-info-auther-operate">
							<input type="hidden" value="${u.id }" name="authId" id="authId">
							<a href="javascript:void(0);" onclick="attentionArticleAuth();" class="article-sourcse-info-auther-com article-sourcse-info-auther-attention" >关注</a>
							<a href="javascript:void(0);" onclick="sendPrivateMsg();" class="article-sourcse-info-auther-com article-sourcse-info-auther-send-msg">发私信</a>
						</li>
						<!-- <li>
							<span>文章</span>
							<span>资源</span>
						</li> -->
					</ul>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="/public/bottom.jsp"></jsp:include>
</body>
</html>
